<template>
  <div class="body">
    <div class="ser_div">
      <el-row>
        <el-col>
          <el-row style="display: flex; align-items: center">
            <el-col :span="8" style="text-align: center"> 供货单位 </el-col>
            <el-col :span="16">
              <el-input v-model="ser.name" placeholder="请输入供货单位" style="width: 100%"></el-input>
              <!-- <el-select v-model="ser.supplier_id" filterable placeholder="请选择供货单位" style="width: 100%">
                <el-option v-for="(item, index) in productList" :key="index" :label="item.name" :value="item.id">
                </el-option>
              </el-select> -->
            </el-col>
          </el-row>
        </el-col>
        <el-col>
          <el-row style="display: flex; align-items: center">
            <el-col :span="8" style="text-align: center"> 供货时间 </el-col>
            <el-col :span="16">
              <el-date-picker v-model="order_data" @change="order_data_change" value-format="yyyy-MM-dd"
                type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
              </el-date-picker>
            </el-col>
          </el-row>
        </el-col>
        <el-col>
          <el-button class="add_btn" @click="ser_warehouse">搜索</el-button>
          <el-button class="add_btn" @click="reset">重置</el-button>
          <el-button class="add_btn" @click="add_warehouse" style="margin-left: 15px">新增供应商</el-button>
        </el-col>
      </el-row>
    </div>

    <el-table :data="productList" v-loading="loading" border>
      <el-table-column prop="code" label="供应商编号"> </el-table-column>
      <el-table-column prop="name" label="供应商名称"> </el-table-column>
      <el-table-column prop="link_man" label="负责人"> </el-table-column>
      <el-table-column prop="bank_name" label="开户银行名称"> </el-table-column>
      <el-table-column prop="bank_account" label="银行账号"> </el-table-column>
      <el-table-column prop="address" label="联系地址"> </el-table-column>
      <el-table-column prop="expend" label="材料支出"> </el-table-column>
      <el-table-column prop="debt" label="欠款金额"> </el-table-column>
      <el-table-column prop="expend" label="支出详情">
        <template slot-scope="scope">
          <span style="cursor: pointer; color: cadetblue; padding-left: 5px" @click="mingxi_gets(scope.row)">详情</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="260" fixed="right">
        <template slot-scope="scope">
          <el-button @click="add_warehouse(scope.row)" type="text" icon="el-icon-edit">编辑</el-button>
          <el-popconfirm confirm-button-text="确定" cancel-button-text="取消" icon="el-icon-info" icon-color="red"
            title="是否删除这条数据？" @confirm="del_product(scope.row)">
            <el-button slot="reference" type="text" icon="el-icon-delete">
              删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background @prev-click="prev"
        @next-click="next" :current-page.sync="pagination.page" :page-size="pagination.per_page"
        layout="total, prev, pager, next" :total="total">
      </el-pagination>
    </div>
    <el-dialog title="支出明细" :visible.sync="isdingdan" width="65%" :close-on-click-modal="false">
      <div class="ser_div">
        <el-row>
          <el-col>
            <el-row style="display: flex; align-items: center">
              <el-col :span="8" style="text-align: center"> 支付方式 </el-col>
              <el-col :span="16">
                <el-select v-model="ser_tan.clearing_form" filterable placeholder="请选择支付方式" style="width: 100%">
                  <el-option label="线上" value="3"></el-option>
                  <el-option label="线下" value="2"></el-option>
                  <el-option label="赊账" value="1"></el-option>
                  <!-- <el-option label="后付" value="后付"></el-option>
                  <el-option label="发单转款" value="发单转款"></el-option>
                  <el-option label="垫付" value="垫付"></el-option>
                  <el-option label="到付" value="到付"></el-option> -->

                </el-select>
              </el-col>
            </el-row>
          </el-col>
          <el-col>
            <el-button class="add_btn" @click="ser_warehouse_tan">搜索</el-button>
            <el-button class="add_btn" @click="reset_tan">重置</el-button>
          </el-col>
        </el-row>
      </div>
      <el-table :data="dingdanlist" stripe style="width: 100%" border>
        <el-table-column prop="customer_name" label="结算方式" width="180">
          <template slot-scope="scope">
            <span>
              {{ scope.row.clearing_form === 1 ? "赊账" : scope.row.clearing_form === 2 ? "线下" : "线上" }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="supply_order_number" label="供应单号" width="180">
        </el-table-column>
        <el-table-column prop="num" label="数量" width="180">
        </el-table-column>
        <el-table-column prop="money" label="金额合计" width="180">
        </el-table-column>
        <el-table-column prop="created_at" label="时间 " w idth="180">
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination @size-change="modelhandleSizeChange" @current-change="modelhandleCurrentChange" background
          @prev-click="modelprev" @next-click="modelnext" :current-page.sync="modelmodel.page"
          :page-size="modelmodel.per_page" layout="total, prev, pager, next" :total="modelTotal">
        </el-pagination>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isdingdan = false">取 消</el-button>
      </span>
    </el-dialog>
    <el-dialog :title="title" :visible.sync="isProduct" width="40%" :close-on-click-modal="false" @close="close_dialog">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="110px" class="demo-ruleForm">
        <el-row>
          <el-col :span="11">
            <el-form-item label="供应商编号" prop="code">
              <el-input v-model="ruleForm.code"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="供应商名称" prop="name">
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="类型" prop="type">
              <el-select v-model="ruleForm.type" placeholder="请选择类型" style="width: 100%">
                <el-option v-for="(item, index) in typelist" :key="index" :label="item.name" :value="item.type">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="联系人" prop="link_man">
              <el-input v-model="ruleForm.link_man"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="联系电话" prop="tel">
              <el-input v-model="ruleForm.tel"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="联系地址" prop="address">
              <el-input v-model="ruleForm.address"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="开户银行名称" prop="bank_name">
              <el-input v-model="ruleForm.bank_name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="银行账号" prop="bank_account">
              <el-input v-model="ruleForm.bank_account"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close_dialog">取 消</el-button>
        <el-button type="primary" @click="submitaddhuojia('ruleForm')">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getSupplierList, createSupplier, delSupplier, getExpendDetail } from "@/api/product/index";
export default {
  data() {
    return {
      ser_tan: {
        clearing_form: ''
      },
      ser: { supplier_id: "", start_time: "", end_time: "" },
      isdingdan: false,
      loading: true,
      typelist: [
        {
          type: 1,
          name: "厂家",
        },
        {
          type: 2,
          name: "代理商",
        },
        {
          type: 3,
          name: "个人",
        },
      ],
      huojiatitle: "",
      title: "",
      isProduct: false,
      ishuojia: false,
      productList: [],
      pagination: {
        per_page: 10,
        page: 1,
      },
      modelmodel: {
        per_page: 10,
        page: 1,
      },
      total: 0,
      warehouse_name: "",
      id: "",
      ruleForm: {
        id: "",
        code: "",
        name: "",
        type: "",
        link_man: "",
        tel: "",
        address: "",
        bank_name: "",
        bank_account: "",
      },
      rules: {
        code: [
          { required: true, message: '请输入供应商编号', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入供应商名称', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请选择类型', trigger: 'blur' }
        ],
        link_man: [
          { required: true, message: '请输入联系人', trigger: 'blur' }
        ],
        tel: [
          { required: true, message: '请输入联系方式', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请输入供应商地址', trigger: 'blur' }
        ],
        bank_name: [
          { required: true, message: '请输入供应商开户行', trigger: 'blur' }
        ],
        bank_account: [
          { required: true, message: '请输入银行卡号', trigger: 'blur' }
        ]
      },
      order_data: "",
      isExpandAll: false,
      mode: {
        page: 1,
        per_page: 10
      },
      modelTotal: 0,
      supplier: {},
      dingdanlist: []
    };
  },
  mounted() {
    this.getlist();
  },
  methods: {
    order_data_change(val) {
      this.ser.start_time = val[0];
      this.ser.end_time = val[1];
    },
    ser_warehouse() {
      this.getlist();
    },
    reset() {
      this.ser = {
        supplier_id: "",
      }
      this.getlist();

    },
    ser_warehouse_tan() {
        
       this.mingxi_gets(this.supplier)
    },
    reset_tan() {
       this.ser_tan = {
        clearing_form: "",
      }
      this.modelmodel={
        per_page: 10,
        page: 1,
      }
      this.mingxi_gets(this.supplier)
    },
    mingxi_gets(val) {
      this.isdingdan = true
      this.supplier = val
      getExpendDetail({ supplier_id: val.id, ...this.modelmodel, ...this.ser_tan,start_time:this.ser.start_time,end_time:this.ser.end_time }).then(res => {
        if (res.code == 200) {
          this.dingdanlist = res.data.data
          this.modelTotal = res.data.total
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
      })
    },
    del_product(row) {
      delSupplier({ id: row.id, is_del: 1 }).then(res => {
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: "删除成功",
          });
          this.addhuojia = {
            goods_shelf_name: '',
            goods_shelf_id: '',
            warehouse_id: ''
          },
            this.getlist();
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
      })
    },
    close_dialog() {
      this.isProduct = false;
      this.ruleForm = {
        id: "",
        code: "",
        name: "",
        type: "",
        link_man: "",
        tel: "",
        address: "",
        bank_name: "",
        bank_account: "",
      }
    },
    submitaddhuojia(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          createSupplier(this.ruleForm).then(res => {
            if (res.code == 200) {
              this.isProduct = false
              this.$message.success('提交成功')
              this.getlist()
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    add_warehouse(row) {
      if (row.id) {
        this.ruleForm = row
        this.title = "编辑供应商";
      } else {
        this.title = "新增供应商";
      }
      this.isProduct = true;
    },
    getlist() {
      getSupplierList({ ...this.pagination, ...this.ser }).then((res) => {
        if (res.code == 200) {
          this.productList = res.data.data;
          this.total = res.data.total;
          this.loading = false;

        }
      });
    },
    handleSizeChange(val) {
      console.log(val);
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pagination.page = val;
      this.getlist();
    },
    prev() {
      this.pagination.page = this.pagination.page - 1;
      this.getlist();
    },
    next() {
      console.log("ss");
      this.pagination.page = this.pagination.page + 1;
      this.getlist();
    },
    modelprev() {
      this.modelmodel.page = this.modelmodel.page - 1;
      this.mingxi_gets(this.supplier);
    },
    modelnext() {
      console.log("ss");
      this.modelmodel.page = this.modelmodel.page + 1;
      this.mingxi_gets(this.supplier);
    },
    modelhandleSizeChange(val) {
      console.log(val);
      console.log(`每页 ${val} 条`);
    },
    modelhandleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.modelmodel.page = val;
      this.mingxi_gets(this.supplier);
    },
  },
};
</script>

<style scoped></style>
